<template>
	<view class="surrender">
		<form>
			<label for="username">姓名:</label>
			<input type="text" id="username" v-model="surrenderInfo.username" placeholder="你的全名">
			<br>
			<label for="address">租赁地址:</label>
			<input type="text" id="address" v-model="surrenderInfo.address" placeholder="完整地址">
			<br>
			<label for="contractId">租赁合同号:</label>
			<input type="text" id="contractId" v-model="surrenderInfo.contractId" placeholder="租赁合同的编号">
			<br>
			<view class="leaveTime">
				<label for="time">退租日期</label>
				<view class="value" @tap="onDisplay()">{{ formatDate(surrenderInfo.leaveTime) }}</view>
			</view>
			<br>
			<label for="phone">联系方式:</label>
			<input type="text" id="phone" v-model="surrenderInfo.phone" placeholder="电话号码">
			<br>
			<label for="bankNumber">银行卡卡号:</label>
			<input type="text" id="bankNumber" v-model="surrenderInfo.bankNumber" placeholder="退款路径(选填)">
			<button type="button" @click="submit">提交</button>
		</form>
		<uni-calendar ref="calendar" :insert="false" @confirm="onConfirm" />
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { insertRental } from '../../services/rental';
const calendar = ref(null);
const surrenderInfo = reactive({
	username: '', // 姓名
	address: '', // 租赁地址
	contractId: '', // 租赁合同号
	leaveTime: '', // 退租日期
	phone: '', // 联系方式
	bankNumber: '' // 银行卡卡号
});
const onDisplay = () => {
	if (calendar.value != null) {
		calendar.value.open();
	}

};
const formatDate = (date: string) => {
	return date !== ''
		? `${new Date(date).getFullYear()}/${new Date(date).getMonth() + 1}/${new Date(date).getDate()}`
		: '请选择';
};
const onConfirm = (e) => {
	console.log(e)
	const newDate = e.fulldate;
	surrenderInfo.leaveTime = newDate

};
const submit = async () => {
	if(surrenderInfo.address == ''|| surrenderInfo.contractId == ''||surrenderInfo.leaveTime == ''||surrenderInfo.phone == '' || surrenderInfo.username == ''|| surrenderInfo.bankNumber == '')
	{
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		});
		return
	}
	else{
	const res =await insertRental(surrenderInfo)
	uni.navigateTo({
		url: "/pages/prompt/prompt?msg=退租已提交"
	});
	}

	
};
</script>

<style scoped>
.surrender {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 5px;
}

.user_avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

form {
	display: flex;
	flex-direction: column;

}

label {
	margin-top: 10px;
	font-size: 14px;
}

input {
	height: 35px;
	margin-top: 5px;
	border: 1px solid #ced4da;
	border-radius: 5px;
	font-size: 14px;
	padding: 0px 10px;
}
.leaveTime
{
	height: 48px;
    display: flex;
    justify-content: space-between
}

button {
	margin-top: 20px;
	background-color: #007bff;
	color: white;
	border: none;
	font-size: 14px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

button:hover {
	background-color: #0056b3;
}
</style>